import React, {useEffect, useState} from "react";
import {Center, HamburgerIcon, ScrollView, Text, View} from "native-base";
import array from "../../utils/array";
import {StyleSheet, TouchableOpacity} from "react-native";
import {NewContent} from "./newContent";

const height = 40;


export const NewSectNav = ({route, navigation}) => {
    const [data, setData] = useState([]);
    const [num, setNum] = useState(0);
    const [bigHeight, setBigHeight] = useState(80);
    function _remove(){
        if(bigHeight!==0){
            setBigHeight(0);
        }else{
            setBigHeight(80);
        }
    }
    useEffect(()=>{
        const msg = route.params.datas;
        const photos = msg[0].replace(/\'/g, "").replace(/\(/g, "").replace(/\[/g, "").replace(/\]/g, "").split(",");
        const introduces = msg[1].replace(/\'/g, "").replace(/\[/g, "").replace(/\]/g, "").split(",");
        const names = msg[2].replace(/\'/g, "").replace(/\[/g, "").replace(/\]/g, "").split(",");
        const name = [];
        const string = [];
        for(let i = 0;i<names.length;i++){
            if(names[i]!==''){
                if(typeof array.contains(string,names[i])!=="boolean"){
                    let num=array.contains(string,names[i])
                    name[num].photo.push(photos[i])
                    name[num].introduce.push(introduces[i])
                    name[num].num++
                }else{
                    string.push(names[i])
                    name.push({
                        name:names[i],
                        photo:[
                            photos[i],
                        ],
                        introduce:[
                            introduces[i],
                        ],
                        num:1
                    })
                }
            }
        }
        setData(name);
    }, [route.params.datas])
    return <View style={{height: '100%', width: '100%', paddingLeft: bigHeight, borderWidth: 1, borderColor:'#ffffff', position: 'relative'}}>
        <View style={{height: '100%', width: bigHeight, backgroundColor: '#ffffff', position: 'absolute', borderWidth:1, borderColor: '#eeeeee', top: 0, left: 0, paddingTop: height}}>
            <View style={styles.leftChinese}>
                <Center _text={{fontSize: 12,fontWeight:'bold'}}>作者</Center>
                <Center _text={{fontSize: 12,fontWeight:'bold'}}>数量</Center>
            </View>
            <ScrollView style={styles.leftContent}>
                {
                    data.map((item,index)=>{
                        return (
                            <View key={index}>
                                {
                                    num===index&&
                                    <View style={styles.leftNameS}>
                                        <View>
                                            <Text style={styles.names}>{item.name.trim()===''?'其他':item.name}</Text>
                                        </View>
                                        <View style={styles.rightTopNames}>
                                            <Text style={styles.rightTopNamesText}>{item.name.trim()===''?item.num-1:item.num}</Text>
                                        </View>
                                    </View>
                                }
                                {
                                    num!==index&&
                                    <TouchableOpacity onPress={()=>{
                                        setNum(index);
                                    }}>
                                        <View style={styles.leftName}>
                                            <View><Text style={styles.name}>{item.name.trim()===''?'其他':item.name}</Text></View>
                                            <View style={styles.rightTopName}><Text style={styles.rightTopNameText}>{item.name.trim()===''?item.num-1:item.num}</Text></View>
                                        </View>
                                    </TouchableOpacity>
                                }
                            </View>
                        )
                    })
                }
            </ScrollView>
        </View>
        <View style={styles.right}>
            <View style={styles.rightChinese}>
                <TouchableOpacity onPress={_remove}>
                    <HamburgerIcon style={{lineHeight:height,height:height,marginLeft:5,color: '#909090'}} size="4" />
                </TouchableOpacity>
            </View>
            <View style={styles.rightContent}>
                {data.length!==0&&<NewContent navigation={navigation} num={num} msg={data[num]}></NewContent>}
            </View>
        </View>
    </View>
}


const styles = StyleSheet.create({
    vessels: {
        height: '100%',
        width: '100%',
        paddingLeft: 80,
        borderWidth: 1,
        borderColor:'#eeeeee',
        position: 'relative'
    },
    left: {
        height: '100%',
        width: 80,
        backgroundColor: '#f4f4f4',
        position: 'absolute',
        borderWidth:1,
        borderColor: '#eeeeee',
        top: 0,
        left: 0,
        paddingTop: height
    },
    leftChinese: {
        paddingLeft: 10,
        paddingRight: 10,
        height: height,
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        flexDirection: 'row',
        justifyContent: 'space-between',
        borderBottomWidth:1,
        borderBottomColor: '#eeeeee',
    },
    leftContent: {
        height: '100%',
        width: '100%'
    },
    right: {
        height: '100%',
        width: '100%',
        backgroundColor: '#fff',
        position: 'relative',
        paddingTop: height
    },
    rightChinese: {
        height: height,
        width: '100%',
        borderBottomWidth:1,
        borderBottomColor: '#eeeeee',
        position: 'absolute',
        top: 0,
        left: 0
    },
    rightContent: {
        height: '100%',
        width: '100%',
    },
    leftName:{
        paddingLeft:5,
        height:40,
        backgroundColor:'#f2f2f1',
        borderTopRightRadius: 5,
        borderBottomRightRadius: 5,
        position: 'relative',
        marginBottom: 10
    },
    rightTopName: {
        position: 'absolute',
        top: 0,
        right: 10
    },
    rightTopNameText: {
        color: '#64a6d1',
        fontSize: 10
    },
    leftNameS:{
        paddingLeft:5,
        height:40,
        backgroundColor:'#5c5a5a',
        borderTopRightRadius: 5,
        borderBottomRightRadius: 5,
        position: 'relative',
        marginBottom: 10
    },
    names: {
        fontSize:12,
        lineHeight: 40,
        color:'#fff',
        fontFamily:'微软雅黑',
        fontWeight:'bold'
    },
    rightTopNames: {
        position: 'absolute',
        top: 0,
        right: 10
    },
    rightTopNamesText: {
        color: '#147bcd',
        fontSize: 10
    },
    name:{
        fontSize:12,
        lineHeight:40,
        fontFamily:'微软雅黑',
        fontWeight:'bold'
    }
})